<template>
  <div>
    <div>
      <el-form style="text-align: left" :model="searchMsg" status-icon :inline="true" ref="searchFrom"
               label-width="100px" class="demo-form-inline">
        <el-form-item label="客户姓名" prop="cname">
          <el-input v-model="searchMsg.cname"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="gname">
          <el-input v-model="searchMsg.gname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单日期" prop="gname">
          <el-date-picker
              v-model="searchMsg.ocreatetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单状态" prop="ostatu">
          <el-radio v-model="searchMsg.ostatu" label="1">已拍下</el-radio>
          <el-radio v-model="searchMsg.ostatu" label="2">已付款</el-radio>
          <el-radio v-model="searchMsg.ostatu" label="3">已发货</el-radio>
          <el-radio v-model="searchMsg.ostatu" label="4">已签收</el-radio>
          <el-radio v-model="searchMsg.ostatu" label="5">已拒绝</el-radio>
          <el-radio v-model="searchMsg.ostatu" label="6">等待退款</el-radio>
          <el-radio v-model="searchMsg.ostatu" label="7">退回</el-radio>

        </el-form-item>
        <br>
        <el-form-item style="margin-left:  500px">
          <el-button type="primary" @click="search()">搜索</el-button>
          <el-button @click="restSearch()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
        ref="multipleTable"
        :data="orderMsgs"
        tooltip-effect="dark"
        style="width: 100%"
        border
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }">
      <el-table-column
          prop="ouid"
          label="订单uid"
          width="200"
          fixed
      >
      </el-table-column>
      <el-table-column
          prop="cname"
          label="客户姓名"
          width="140"
      >
      </el-table-column>
      <el-table-column
          prop="gname"
          label="商品名称"
          width="140"
      >
      </el-table-column>
      <el-table-column
          prop="gcount"
          label="商品数量"
          width="120"
      >
        <template slot-scope="scope">
          {{ scope.row.gcount }}个
        </template>
      </el-table-column>
      <el-table-column
          prop="odesc"
          label="订单描述"
          width="200"
      >
      </el-table-column>
      <el-table-column
          prop="ocreatetime"
          label="创建时间"
          width="200"
      >
      </el-table-column>
      <el-table-column
          prop="oprice"
          label="订单总金额"
          width="120"
      >
        <template slot-scope="scope">
          {{ scope.row.oprice }}￥
        </template>
      </el-table-column>
      <el-table-column
          prop="oaddress"
          label="发货地址"
          width="200"
      >
      </el-table-column>
      .
      <el-table-column
          label="订单状态"
          width="100"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.ostatu===1">
            <el-tag>已拍下</el-tag>
          </div>
          <div v-if="scope.row.ostatu===2">
            <el-tag type="success">已付款</el-tag>
          </div>
          <div v-if="scope.row.ostatu===3">
            <el-tag type="success">已发货</el-tag>
          </div>
          <div v-if="scope.row.ostatu===4">
            <el-tag type="success">已签收</el-tag>
          </div>
          <div v-if="scope.row.ostatu===5">
            <el-tag type="danger">已拒绝</el-tag>
          </div>
          <div v-if="scope.row.ostatu===6">
            <el-tag type="danger">等待退款</el-tag>
          </div>
          <div v-if="scope.row.ostatu===7">
            <el-tag type="danger">退回</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200px"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.ostatu===1">
            <el-button @click="popModifyMenu(scope.row)" type="primary" size="small">编辑</el-button>
            <el-button @click="popRefuse(scope.row)" type="danger" size="small">拒绝</el-button>
          </div>
          <div v-if="scope.row.ostatu===2">
            <el-button @click="popRefuse(scope.row)" type="danger" size="small">拒绝</el-button>
            <el-button @click="popSendEms(scope.row)" type="primary" size="small">发货</el-button>
          </div>
          <div v-if="scope.row.ostatu===3">
            <el-button disabled type="success" size="small">已发货</el-button>
          </div>
          <div v-if="scope.row.ostatu===4">
            <el-button disabled type="success" size="small">已签收</el-button>
          </div>
          <div v-if="scope.row.ostatu===5">
            <el-button disabled type="danger" size="small">已拒绝</el-button>
          </div>
          <div v-if="scope.row.ostatu===6">
            <el-button  type="danger" @click="popRefund(scope.row)" size="small">退款</el-button>
          </div>
          <div v-if="scope.row.ostatu===7">
            <el-button  type="success" disabled size="small">退回</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[3,5,10,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--    修改-->
    <el-dialog
        title="修改"
        :visible.sync="modifyFlag"
        width="30%"
        :before-close="handleClose">
      <el-form :model="orderMsg" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="付款金额" prop="oprice">
          <el-input v-model="orderMsg.oprice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收货地址" prop="oaddress">
          <el-input v-model="orderMsg.oaddress" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="modify('userMsg')">提交</el-button>
          <el-button @click="resetForm('userMsg')">重置</el-button>
          <el-button @click="modifyFlag = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--    拒绝的弹窗-->
    <el-dialog
        title="拒绝"
        :visible.sync="refuseFlag"
        width="30%"
        :before-close="handleClose">
      <el-form :model="orderMsg" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="拒绝理由" prop="asmsg">
          <el-input v-model="afterSaleMsg.asmsg" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="refuse('userMsg')">提交</el-button>
          <el-button @click="resetForm('userMsg')">重置</el-button>
          <el-button @click="modifyFlag = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--    退款的弹窗-->
    <el-dialog
        title="请确认退款订单信息"
        :visible.sync="refundFlag"
        width="50%"
        >
      <el-descriptions class="margin-top" title="订单详情" :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            订单UID
          </template>
          {{orderMsg.ouid}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          {{orderMsg.cname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            发货地址
          </template>
          {{orderMsg.oaddress}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            商品名字
          </template>
          {{orderMsg.gname}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            商品数量
          </template>
          {{orderMsg.gnub}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            商品总价
          </template>
          {{orderMsg.oprice}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            备注
          </template>
          {{orderMsg.odesc}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            创建时间
          </template>
          {{orderMsg.ocreatetime}}
        </el-descriptions-item>
      </el-descriptions>
      <br>
      <el-button type="primary" @click="refund">确认退款</el-button>
      <el-button type="success" @click="qx">取消</el-button>
    </el-dialog>
    <!--    修改-->
    <el-dialog
        title="发货"
        :visible.sync="expFlag"
        width="50%"
        :before-close="handleClose">
      <el-form :model="expMsg" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="商品数量" prop="egnum">
          <el-input disable v-model="expMsg.egnum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="egname">
          <el-input disable v-model="expMsg.egname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注信息" prop="emsg">
          <el-input v-model="expMsg.emsg" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="付款金额" prop="oprice">
          <el-input v-model="expMsg.oprice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收货地址" prop="etoaddress">
          <el-input v-model="expMsg.etoaddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收货电话" prop="etophone">
          <el-input v-model="expMsg.etophone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收货人" prop="etoname">
          <el-input v-model="expMsg.etoname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发货地区">
        <el-select v-model="form.province" clearable placeholder="省" @change="seletekey($event, 'province')">
          <el-option v-for="(val, key) in provinces" :key="key" :label="val" :value="val" />
        </el-select>
        <el-select v-model="form.city" clearable placeholder="市" @change="seletekey($event, 'city')">
          <el-option v-for="(val, key) in citys" :key="key" :label="val" :value="val" />
        </el-select>
        <el-select v-model="form.area" clearable placeholder="区" @change="seletekey($event, 'area')">
          <el-option v-for="(val,key) in areas" :key="key" :label="val" :value="val" />
        </el-select>
          <br>
          <el-input v-model="form.realArea" placeholder="详细地址"></el-input>
          <br>
        <el-form-item>
          <el-button type="primary" @click="sendEms('userMsg')">提交</el-button>
          <el-button @click="resetForm('userMsg')">重置</el-button>
          <el-button @click="expFlag = false">取 消</el-button>
        </el-form-item>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import { pcaa } from 'area-data'
export default {
  name: "usermenu",
  data() {

    return {
      // 用户数据
      orderMsgs: [],
      // 分页数据
      pageIndex: 1,
      pageSize: 5,
      total: 0,

      // 修改的标记
      modifyFlag: false,
      refuseFlag: false,
      expFlag: false,
      // 退款弹窗的标记
      refundFlag:false,
      // 快递的信息
      expMsg: {
        emsg: ""
      },
      // 要被添加的用户信息
      orderMsg: {},
      // 搜索的条件
      searchMsg: {},
      // 拒绝后生成的售后单信息
      afterSaleMsg: {},
      // 临时用户对象
      tempUser: {},

      form: {
        province:"",
        city:"",
        realArea:""
      },
      pcaaData: pcaa,
      // 区域数据
      provinces: pcaa['86'],
      citys: [],
      areas: []

    };
  },
  // 页面初始化方法
  created() {
    this.flushPage()
  },
  methods: {
    seletekey(e, type) {
      if (e) {
        switch (type) {
          case 'province':
            Object.keys(this.provinces).filter(item => {
              if (this.provinces[item] === e) {
                this.citys = this.pcaaData[item]
              }
            })
            break
          case 'city':
            Object.keys(this.citys).filter(item => {
              if (this.citys[item] === e) {
                this.areas = this.pcaaData[item]
              }
            })
            break
          case 'area':
            break
        }
      }
    },

    // 分页的方法，当页面大小改变
    handleSizeChange(val) {
      this.pageSize = val
      this.flushPage()
    },
    // 当页面下标改变
    handleCurrentChange(val) {
      this.pageIndex = val
      this.flushPage()
    },

    // 弹出修改
    popModifyMenu(row) {
      this.$http.get("/Order/GetMsg/" + row.oid).then(resp => {
        this.orderMsg = resp.data.data
      })
      this.modifyFlag = true
    },
    popSendEms(row) {
      console.log(row)
      this.tempUser.custname = row.cname
      this.$http.post("/Customer/GetMsgSp", this.tempUser).then(resp => {
        let userinfo = resp.data.data
        console.log(userinfo)
        this.expMsg.ouid = row.ouid
        this.expMsg.egname = row.gname
        this.expMsg.etoname = userinfo.custname
        this.expMsg.egnum = row.gnub
        this.expMsg.oprice = row.oprice
        this.expMsg.etoaddress = userinfo.address
        this.expMsg.etophone = userinfo.phone
        this.expMsg.efromphone = 132456456
        this.expFlag = true
      })

    },
    // 修改用户信息
    modify() {
      this.$http.post("/Order/Modify", this.orderMsg).then(resp => {
        if (resp.data.code === 2000) {
          this.$notify({
            title: "消息",
            message: "更新成功",
            duration: 4000
          })
          this.flushPage()
        } else {
          this.$notify.error({
            title: '错误',
            message: '更新失败'
          });
          this.flushPage()
        }
      })
      this.handleClose()

    },
    // 弹出拒绝的对话框
    popRefuse(row) {
      this.afterSaleMsg.oid = row.oid
      this.refuseFlag = true
    },
    // 弹出退款的窗口
    popRefund(row){
      this.refundFlag=true;
      this.orderMsg=row
    },
    // 退款的方法
    refund(){
      this.$http.get("/Order/refund/"+this.orderMsg.ouid).then(resp=>{
        if (resp.data.code==2000){
          this.$notify({
            title: "消息",
            message: "退款成功",
            duration: 4000
          })
          this.orderMsg={}
          this.flushPage()
          this.refundFlag=false
        }
      })
    },
    qx(){
      this.orderMsg={}
      this.refundFlag=false
    },
    // 拒绝的方法
    refuse() {
      this.$http.post("/AfterSale/Produce", this.afterSaleMsg).then(resp => {
        if (resp.data.code === 2000) {
          this.$notify({
            title: "消息",
            message: "更新成功",
            duration: 4000
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: '更新失败'
          });
        }
        this.handleClose()
        this.flushPage()
      })
    },
    // 对话框关闭之后
    handleClose() {
      this.$nextTick(() => {
        this.$refs['ruleForm'].resetFields();
      })
      this.refuseFlag = false
      this.modifyFlag = false
      this.expFlag = false
    },

    resetForm() {
      this.$nextTick(() => {
        this.$refs['ruleForm'].resetFields();
      })
    },
    // 重置搜索菜单
    restSearch() {
      this.$nextTick(() => {
        this.$refs['searchFrom'].resetFields();
      })
    },
    // 执行搜索方法
    search() {
      this.$http.post("/Order/GetOrders", this.searchMsg).then(resp => {
        this.orderMsgs = resp.data.data
      })
    },
    // 刷新页面的方法
    flushPage() {
      // 获取全部的用户信息
      this.$http.get("/Order/List/" + this.pageIndex + "/" + this.pageSize).then(resp => {
        // 放入用户信息
        this.orderMsgs = resp.data.data.records;
        // 放入分页数据
        this.total = resp.data.data.total
      })
    },
    // 保存快递订单
    sendEms() {
      this.expMsg.etoaddress=this.form.province+"/"+this.form.city+"/"+this.form.area+"/"+this.form.realArea
      this.expFlag = false
      this.$http.post("/Express/add", this.expMsg).then(resp => {
        if (resp.data.code === 2000) {
          this.$notify({
            title: "消息",
            message: "更新成功",
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: '更新失败'
          });
        }
        this.flushPage()
      })
    }
  }
}

</script>

<style scoped>

</style>
